<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改新闻</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .nav-primary {
            background: #0066CC;
            padding: 0.8rem 1.5rem;
        }
        .nav-divider {
            border-right: 1px solid rgba(255,255,255,0.3);
            height: 24px;
            margin: 0 1.5rem;
        }
        .form-card {
            max-width: 800px;
            margin: 2rem auto;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 (精确匹配图1) -->
    <nav class="nav-primary navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand text-white fw-bold" href="#">新闻系统</a>
            <div class="d-flex align-items-center">
                <ul class="navbar-nav flex-row">
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/root_home.html">首页</a>
                    </li>
                    <div class="nav-divider"></div>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/add_class.html">添加分类</a>
                    </li>
                    <div class="nav-divider"></div>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/release_news.html">发布新闻</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="form-card card">
            <div class="card-body p-4">
                <!-- 标题 (匹配图2) -->
                <h2 class="card-title mb-4">发布新闻</h2>
                
                <!-- 编辑表单 -->
                <form id="editForm">
                    <div class="row g-3">
                        <!-- 新闻标题 -->
                        <div class="col-12">
                            <label class="form-label fw-bold">新闻标题</label>
                            <input type="text" class="form-control" id="title" required>
                        </div>

                        <!-- 作者与分类 -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold">作者</label>
                            <input type="text" class="form-control" id="publisher" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">新闻分类</label>
                            <select class="form-select" id="category" required>
                                <option value="" disabled>加载分类中...</option>
                            </select>
                        </div>

                        <!-- 新闻内容 -->
                        <div class="col-12">
                            <label class="form-label fw-bold">新闻内容</label>
                            <textarea class="form-control" id="content" rows="10" required></textarea>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="col-12 d-flex gap-3 justify-content-end mt-4">
                            <a id="cancelBtn" class="btn btn-secondary px-4">取消</a>
                            <button type="submit" class="btn btn-primary px-4">
                                <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                                立即发布
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 获取新闻ID
        const getNewsId = () => {
            const params = new URLSearchParams(window.location.search)
            return params.get('news_id')
        }

        // 加载初始数据
        const loadData = async () => {
            const newsId = getNewsId()
            if (!newsId) return alert('新闻ID缺失')

            try {
                // 获取新闻数据
                const newsRes = await fetch('/get_one_news', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ news_id: newsId })
                })
                const { title, publisher, class: category, path } = await newsRes.json()

                // 获取分类数据
                const classRes = await fetch('/get_class')
                const { class: categories } = await classRes.json()

                // 填充分类选项
                const categorySelect = document.getElementById('category')
                categorySelect.innerHTML = categories.map(c => `
                    <option value="${c}" ${c === category ? 'selected' : ''}>${c}</option>
                `).join('')

                // 填充表单数据
                document.getElementById('title').value = title
                document.getElementById('publisher').value = publisher
                document.getElementById('cancelBtn').href = `/display_news.html?news_id=${newsId}`

                // 加载新闻内容
                const contentRes = await fetch(path)
                document.getElementById('content').value = await contentRes.text()

            } catch (error) {
                console.error('加载失败:', error)
                alert('数据加载失败，请刷新重试')
            }
        }

        // 表单提交处理
        document.getElementById('editForm').addEventListener('submit', async (e) => {
            e.preventDefault()
            
            const btn = e.target.querySelector('button')
            const spinner = btn.querySelector('.spinner-border')
            const newsId = getNewsId()

            try {
                // 显示加载状态
                btn.disabled = true
                spinner.classList.remove('d-none')

                // 提交修改
                const res = await fetch('/modify_news', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        title: document.getElementById('title').value,
                        publisher: document.getElementById('publisher').value,
                        class: document.getElementById('category').value,
                        body: document.getElementById('content').value,
                        news_id: newsId
                    })
                })

                if (!res.ok) throw new Error('修改失败')
                window.location.href = `/display_news.html?news_id=${newsId}`
                
            } catch (error) {
                alert(error.message)
            } finally {
                btn.disabled = false
                spinner.classList.add('d-none')
            }
        })

        // 初始化加载
        window.onload = loadData
    </script>
</body>
</html>